<template>
  <div class="app-container">

    <el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item style="margin-left: -30px" label="乘客姓名" prop="passengerName">
        <el-select
          v-model="queryParams.passengerName"
          filterable
          @change="handleChange"
        >
          <el-option
            v-for="item in ckXmOptions"
            :key="item.ckName"
            :label="item.ckName"
            :value="item.ckName"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: -10px" label="乘客证件号" prop="passengerIdCard">
        <el-select
          v-model="queryParams.passengerIdCard"
          filterable
        >
          <el-option
            v-for="item in ckIdCardOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: -25px" label="登机类型" prop="djLx">
        <el-select v-model="queryParams.djLx" clearable style="width: 120px" >
          <el-option
            v-for="dict in dict.type.dj_lx"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div v-if="this.cfStepInfo != null && this.mdStepInfo != null">

      <!--   按钮点击关闭   -->
      <div v-if="this.clickType == 0">
        <!--  出发地  -->
        <el-card class="box-card-cf box-card-item">
          <div class="text">
            <span class="el-tag el-tag--primary el-tag--medium el-tag--light">出发地:{{this.cfPlace}}</span>
          </div>
          <div class="step">
            <cf-steps :stepInfo="cfStepInfo"></cf-steps >
          </div>
        </el-card>
        <!--  目的地  -->
        <el-card class="box-card-md box-card-item">
          <div class="text">
            <span class="el-tag el-tag--warning el-tag--medium el-tag--light">目的地:{{this.mdPlace}}</span>
          </div>
          <div class="step">
            <md-steps :stepInfo="mdStepInfo"></md-steps >
          </div>
        </el-card>
      </div>

      <!--   按钮点击打开   -->
      <div v-if="this.clickType == 1">
        <!--  出发地  -->
        <el-card class="box-card-cf box-card-item">
          <div class="text">
            <span class="el-tag el-tag--primary el-tag--medium el-tag--light">出发地:{{this.cfPlace}}</span>
          </div>
          <div class="step">
            <cf-step-twos :stepInfo="cfStepInfo"></cf-step-twos >
          </div>
        </el-card>
        <!--  目的地  -->
        <el-card class="box-card-md box-card-item">
          <div class="text">
            <span class="el-tag el-tag--warning el-tag--medium el-tag--light">目的地:{{this.mdPlace}}</span>
          </div>
          <div class="step">
            <md-step-twos :stepInfo="mdStepInfo"></md-step-twos >
          </div>
        </el-card>
      </div>

    </div>

    <el-empty v-if="this.cfStepInfo == null && this.mdStepInfo == null"
              description="未查询到当前乘客行李相关节点信息"></el-empty>

  </div>

</template>

<script>
import { selectCkXlPointInfo } from '@/api/ckxl/xl'
import { getCkXmInfo, getCkIdCardByCkXm } from '@/api/ckxl/ck'
import {EventBus} from '@/layout/components/event-bus';

import cfSteps from './cfStep';
import cfStepTwos from './cfStepTwo';
import mdSteps from './mdStep';
import mdStepTwos from './mdStepTwo';

export default {
  components:{
    cfSteps,
    cfStepTwos,
    mdSteps,
    mdStepTwos
  },
  name: 'ZiDa',
  dicts: ['dj_lx'],
  data() {
    return {
      // 查询参数
      queryParams: {
        passengerName: '',
        passengerIdCard: '',
        djLx:'0',
        cachedCookieValue:''
      },
      // 表单校验
      rules: {
        passengerName: [
          { required: true, message: "乘客姓名不能为空", trigger: "blur" }
        ],
        passengerIdCard: [
          { required: true, message: "乘客证件号不能为空", trigger: "blur" }
        ],
        djLx: [
          { required: true, message: "登机类型不能为空", trigger: "change" }
        ],
      },
      ckXmOptions: [{
        label:"",
        value:""
      }],
      ckIdCardOptions: [],
      cfPlace:'',
      cfStepInfo:null,
      mdPlace:'',
      mdStepInfo:null,
      clickType:'1',
    }
  },
  watch: {
    '$store.state.user.peopleNum': {
      handler:function(newVal,oldVal){
        if(newVal != oldVal){
          this.queryParams.passengerName = '';
          this.queryParams.passengerIdCard = '';
          this.getCkBaseInfo();
        }
      }
    }
  },
  created() {
  },
  mounted() {
    EventBus.$on('custom-event', this.handleEvent);
    this.queryParams.passengerName = '';
    this.queryParams.passengerIdCard = '';
    this.getCkBaseInfo();
  },
  computed: {
  },

  methods: {

    // 表单重置
    reset() {
      this.form= {};
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getCkxlPoint();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryIsTransfer = '';
      this.ckXmOptions = [];
      this.ckIdCardOptions = [];
    },

    /** 查询乘客点位信息 */
    getCkxlPoint() {
      this.cfStepInfo = null;
      this.mdStepInfo = null;
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.fillCkIdCard();
          this.loading = true;
          selectCkXlPointInfo(this.queryParams).then(response => {
            this.cfPlace = response.data.cfPlace;
            this.cfStepInfo = {
              "list":response.data.cfList,
              "step": Number(response.data.cfStep)
            }
            this.mdPlace = response.data.mdPlace;
            this.mdStepInfo = {
              "list":response.data.mdList,
              "step": Number(response.data.mdStep)
            }
          });
        }
      })
    },

    // 获取真正的乘客证件号
    fillCkIdCard(){
      this.ckIdCardOptions.forEach(item => {
        if(item.label == this.queryParams.passengerIdCard){
          this.queryParams.passengerIdCard = item.value;
        }
      })
    },

    // 防抖处理（500ms内仅触发一次）
    getCkBaseInfo() {
      getCkXmInfo().then(response => {
        if (response.data != null) {
          this.ckXmOptions = response.data
        }
      }).catch(() => {
        this.ckXmOptions = [];
      });
    },

    //选中乘客姓名
    handleChange(value){
      this.getCkIdCard(value);
    },

    //根据乘客姓名查询乘客身份证id
    getCkIdCard(ckName){
      getCkIdCardByCkXm(ckName).then(response => {
        this.ckIdCardOptions = [];
        if (response.data != null) {
          response.data.forEach(item => {
              this.ckIdCardOptions.push({
                'label': this.formatIdCard(item.idCard),
                'value': item.idCard
              })
            }
          )
          this.queryParams.passengerIdCard = this.ckIdCardOptions[0].label;
        }
      }).catch(() => {
        this.ckIdCardOptions = [];
      });
    },

    // 格式化显示身份证号（如：410*****123456）
    formatIdCard(idCard) {
      if(idCard != null){
        return idCard.replace(/(\d{4})\d+(\d{6})/, '$1*****$2');
      }
    },

  }
}
</script>

<style lang="scss" scoped>

.item {
  padding: 5px 0;
  margin-bottom: -6px;
  margin-top: 2px;
}

.box-card-cf {
  width: 100%;
  height: 430px;
}

.box-card-md {
  width: 100%;
  height: 330px;
}

.box-card-item {
  margin-top: 5px;
}

.box-card-top {
  margin-top: -2px;
}

 ::v-deep .el-step__title {
  font-size: 12px;
  line-height: 35px;
}

 .text {
   font-size: 12px;
   margin-top: -10px;
   margin-left: -15px;
 }

.step {
  margin-top: 50px;
}

</style>
